<template>
  <a-row>
    <a-col :span="8">
      <a-card hoverable style="width: 100%">
        <template #cover>
          <img
            alt="example"
            :src="
              userInfo.avatar ||
              'https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png'
            "
          />
        </template>
        <a-card-meta :title="userInfo.username">
          <template #description>{{ userInfo.introduction }}</template>
        </a-card-meta>
      </a-card>
    </a-col>
    <a-col :span="16">
      <a-card hoverable style="width: 100%">
        <a-form
          ref="userInfoRef"
          :model="formState"
          :label-col="{ span: 8 }"
          :wrapper-col="{ span: 16 }"
          autocomplete="off"
          @finishFailed="onFinishFailed"
          @finish="onFinish"
        >
          <a-form-item
            label="用户名"
            name="username"
            :rules="[
              { required: true, message: 'Please input your username!' },
            ]"
          >
            <a-input v-model:value="formState.username" />
          </a-form-item>
          <a-form-item label="角色" name="role" :rules="[{ required: true }]">
            <a-select v-model:value="formState.role">
              <a-select-option :value="1">管理员</a-select-option>
              <a-select-option :value="2">编辑者</a-select-option>
            </a-select>
          </a-form-item>

          <a-form-item label="性别" name="gender" :rules="[{ required: true }]">
            <a-select v-model:value="formState.gender">
              <a-select-option :value="0">保密</a-select-option>
              <a-select-option :value="1">男</a-select-option>
              <a-select-option :value="2">女</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="简介" name="introduction">
            <a-textarea
              v-model:value="formState.introduction"
              placeholder="请输入"
              allow-clear
            />
          </a-form-item>
          <a-form-item label="头像" name="avatar">
            <Upload v-model:value="formState.avatar"></Upload>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <a-button type="primary" html-type="submit">更新</a-button>
          </a-form-item>
        </a-form>
      </a-card>
    </a-col>
  </a-row>
</template>


<script setup>
import { ref, reactive, toRaw, markRaw } from "vue";
import Upload from "@/components/Upload";
import { message } from "ant-design-vue";
import { useUserInfoStore } from "@/store/userInfo";
const { userInfo, changeUserInfo } = useUserInfoStore();
import { Edit } from "@/api/user";
// 转换为非响应式数据
const formState = ref({ ...userInfo });
const userInfoRef = ref();

const onFinish = async (values) => {
  const { success, msg, data } = await Edit(values);
  if (success) {
    message.success(msg);
    changeUserInfo(data);
  } else {
    message.error(msg);
  }
};

const onFinishFailed = (errorInfo) => {
  console.log("Failed:", errorInfo);
};
</script>


<style lang="scss" scoped>
.ant-upload {
  img {
    width: 102px;
    height: 102px;
    border-radius: 4px;
  }
}
</style>